import React, { Component } from "react";
import { DatePicker, Button, Typography  } from "antd";
import {AlipayCircleOutlined, SearchOutlined} from '@ant-design/icons';
const { Paragraph } = Typography;
export default class Antd extends Component {

    state = {
        msg: '海内存知己，天涯若比邻'
    }

    render() {
        return (
            <div style={{ padding: "50px" }}>
                <h1>Antd 组件</h1>
                <h2>日期选择</h2>
                <DatePicker />
                <h2>按钮</h2>
                <Button type="primary">Primary Button</Button>{" "}
                <Button type="primary" danger>
                    Primary
                </Button>
                <Button type="primary" shape="circle" icon={<SearchOutlined />} />
                <h2>图标使用</h2>
                <AlipayCircleOutlined style={{fontSize: '100px', color: 'rgb(50,50,200)'}} />

                <h2>可修改的文本框</h2>
                <Paragraph editable={{ onChange: (v) => {
                    this.setState({
                        msg: v
                    })
                } }}>{this.state.msg}</Paragraph>
            </div>
        );
    }
}
